// 柱状图叠加
import React, {useState, useEffect} from 'react';
import {Table} from 'antd';
import {parsePercent, numberHandle, safeMultiple} from '~/utils/number';
import {transformTableData} from '~/page/FineBi/utils/convert';
import CommonEchart from '~/page/FineBi/common/CommonEchart';
import withPannel from '../withPannel';

const tooltipCallback = params => {
    let resultName = '';
    const tooltipList = params.map(chartItem => {
        const {seriesType, seriesName, name, value, data: {num}, marker} = chartItem;
        let result;
        resultName = name;
        if (num) {
            result = `<br/>${marker} ${seriesName} ${Number(num)} (${parsePercent(value, 2)})`;
        }
        else {
            result = `<br/>${marker} ${seriesName} ${parsePercent(value, 2)}`;
        }


        return result;
    });

    return resultName + tooltipList.join('');
};

const extendOptions = {
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left',
    },
    xAxis: {
        common: {
            axisLabel: {
                // rotate: 30
            }
        }
    },
    yAxis: {
        // 多个轴的格式化
        newYAxis: [
            {
                type: 'value',
                axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
            },
            {
                type: 'value',
                axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`}
            }
        ],
        common: {
            splitLine: {show: false},
        }
    },
    grid: {
        left: 40,
        right: '3%',
        bottom: 20,
        containLabel: true
    },
    series: {
        newYAxis: [
            // 左侧
            {
                yAxisIndex: 0,
                name: '老学员可续人数占比',
                stack: '总量',
            },
            {
                yAxisIndex: 0,
                name: '新学员可续人数占比',
                stack: '总量',
            },
            // 右侧轴
            {
                yAxisIndex: 1,
                name: '老学员综合续班率',
            },
            {
                yAxisIndex: 1,
                name: '新学员综合续班率',
            },
        ],
        common: {
            // stack: '总量',
            barMaxWidth: 30,
            barGap: '100%',
            barCategoryGap: '50%',
            // label: {show: true, position: 'inside', formatter: labelFormatter}
        }
    }
};

const StructureBarChart = props => {
    const {dataSource, unitId, dId} = props;
    const [data, setData] = useState([]);
    const [columns, setColumns] = useState([]);
    const echartData = dataSource?.[unitId] || {};
    const tableUnitId = `${dId}_excel`;

    useEffect(() => {
        const columnList = dataSource?.[tableUnitId]?.columnList || [];
        const value = dataSource?.[tableUnitId]?.value || [];
        const [newColumnList, newValue] = transformTableData(columnList, value);
        const newColumns = newColumnList?.map(item => ({
            title: item.name,
            width: 100,
            render(row) {
                const originValue = row[item.name];

                if (isNaN(originValue)) {
                    return originValue;
                }

                return Number(originValue);
            }
        }));

        setColumns(newColumns);
        setData(newValue);
    }, [dataSource]);

    return (
        <>
            <Table
                dataSource={data}
                columns={columns}
                pagination={false}
                size="small"
                scroll={{x: 'max-content'}}
                // {...tableProps}
            />
            <br />
            <CommonEchart
                {...props}
                id={unitId}
                extendEchartsOptions={extendOptions}
                dataSource={echartData}
            />
        </>
    );
};

export default withPannel(StructureBarChart, 'isTable');
